import React, {useEffect, useState} from "react";
import {createMkdir} from "../../utils/upload/api";
import {Button, Input} from "antd";
import {Modal} from "antd/lib";
import {createFileApi, exportFileZip} from "../file-tree/api";

interface FileBarProps {
    fileVisible: boolean
    dirVisible: boolean
    fileClose: () => void
    fileOpen: () => void
    dirClose: () => void
    dirOpen: () => void
}

const FileBar: React.FC<FileBarProps> = (props: FileBarProps) => {
    const [pathName, setPathName] = useState<string>('')

    //----------------------------------新建文件操作---------------------------------
    /**
     * 新建文件
     */
    const createFile = async () => {
        await createFileApi(pathName, null)
        props.fileClose()
    }
    /**
     * 保存
     */
    const handleFileOk = async () => {
        await createFile()
    };
    //关闭弹窗
    const handleFileCancel = () => {
        props.fileClose()
    };
    // 处理输入变化的回调函数
    const handleFileInputChange = (e: any) => {
        const value = e.target.value; // 获取输入框的值
        setPathName(value); // 更新 pathName 的值
    };
    //----------------------------------新建文件夹操作---------------------------------
    const handleOk = async () => {
        await createMkdir(pathName, null)
        props.dirClose()
    };
    // 关闭弹窗
    const handleCancel = () => {
        props.dirClose()
    };

    // 处理输入变化的回调函数
    const handleInputChange = (e: any) => {
        const value = e.target.value; // 获取输入框的值
        setPathName(value); // 更新 pathName 的值

    };

    useEffect(() => {
        console.log("fileVisible===" + props.fileVisible, "dirVisible===" + props.dirVisible)
    }, [props.dirVisible, props.fileVisible])

    return (
        <>
            <div style={{display: "flex", flexDirection: "row", marginBottom: 5}}>
                <Button style={{paddingLeft: 5}} onClick={props.dirOpen}>创建文件夹</Button>
                <Button onClick={props.fileOpen}>创建文件</Button>
            </div>

            <div style={{display: "flex", flexDirection: "row"}}>
                <Button onClick={() => exportFileZip(null, null)}>导出全部</Button>
                {/*    新建文件的文件名*/}
                {props.fileVisible &&
                    <Modal title="新建文件"
                           okText={'新建'}
                           open={props.fileVisible}
                           onOk={handleFileOk}
                           onCancel={handleFileCancel}>
                        <Input
                            placeholder={'新建的文件名'}
                            value={pathName}
                            onChange={handleFileInputChange}/>
                    </Modal>}
                {/*    新建文件夹的文件名*/}
                {props.dirVisible &&
                    <Modal title="新建文件夹"
                           okText={'新建'}
                           open={props.dirVisible}
                           onOk={handleOk}
                           onCancel={handleCancel}>
                        <Input
                            placeholder={'新建的文件夹名'}
                            value={pathName}
                            onChange={handleInputChange}/>
                    </Modal>}
            </div>
        </>
    )
}
export default FileBar;
